<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>支付页-成功</title>

  <link rel="stylesheet" type="text/css" href="./css/webbase.css" />
  <link rel="stylesheet" type="text/css" href="./css/pages-paysuccess.css" />
</head>

<body>
  <div id="app">

    <div class="cart py-container">
      <!--logoArea-->
      <div class="logoArea">
        <span>支付结果 </span>
      </div>
      <!--主内容-->
      <div class="paysuccess">
        <div class="success">
          <h3><img src="img/right.png" width="48" height="48">　恭喜您，支付成功啦！</h3>
          <div class="paydetail">
            <p>支付方式：{{ paymentTypes[order.paymentType - 1] }}</p>
            <p>支付金额：￥{{ order.totalFee }}元</p>
            <p>预计{{ sendDate }}到达</p>
            <p class="button">
              <a href="/my-orders.html" class="sui-btn btn-xlarge btn-danger">查看订单</a>&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="/index.html" class="sui-btn btn-xlarge ">继续购物</a>
            </p>
          </div>
        </div>

      </div>
    </div>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="js/common.js"></script>
  <script>
    let app = new Vue({
      el: "#app",
      data() {
        return {
          order: {
            paymentType: 1, // 假设使用支付宝支付
            totalFee: 299.99, // 假设支付金额为299.99元
            createTime: new Date().toISOString() // 当前时间
          },
          paymentTypes: ["支付宝支付", "微信支付", "PayPal"],
          util,
          user: null,
        }
      },
      computed: {
        sendDate() {
          if (!this.order.createTime) {
            return "";
          }
          let d = new Date(this.order.createTime);
          return d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + (d.getDate() + 3) + "日"
        }
      }
    });
  </script>
</body>

</html>